import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router'
import { HttpModule, JsonpModule } from '@angular/http';

import { NgZorroAntdModule } from 'ng-zorro-antd';

import { AppComponent } from './app.component'
import { StoreComponent } from './components/store/store.component'
import { SettingComponent } from './components/setting/setting.component'
import { FilesComponent } from './components/files/files.component'
import { FileDetailComponent } from './components/file-detail/file-detail.component'

import { FileService } from './services/file.service'

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    HttpModule,
    JsonpModule,
    NgZorroAntdModule.forRoot(),
    RouterModule.forRoot([
      {
        path: 'store',
        component: StoreComponent
      },

      {
        path: 'files',
        component: FilesComponent
      },

      {
        path: 'file-detail/:id',
        component: FileDetailComponent
      },

      {
        path: 'setting',
        component: SettingComponent
      },

      {
        path: '',
        redirectTo: '/store',
        pathMatch: 'full'
      }
    ])
  ],

  declarations: [
    AppComponent,
    StoreComponent,
    SettingComponent,
    FilesComponent,
    FileDetailComponent
  ],

  providers: [
    FileService
  ],

  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }
